<template>
  <div class="topic">
    <div class="topic_left">
      <user-info :username="result.username"></user-info>
      <topics-ranking :rankingData="rankingData">
        <svg class='icon' aria-hidden='true'>
          <use xlink:href='#icon-xiangguan'></use>
        </svg>相关话题
      </topics-ranking>
    </div>
    <div class="topic_right">
      <div class="content">
        <h4 class="title">
          <svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-chaojihuati'></use>
          </svg>
          {{result.title}}</h4>
        <span>{{result.content}}</span>
        <div class="box">
          <span>{{timer(result.time)}}</span>
          <span>
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-youlanrenshu'></use>
            </svg>
            <span>{{result.visit}}</span>
          </span>
        </div>
        <div class="file">
          <div class="file_img" v-if="result.filetype == 'image'">
            <img v-for="(item,index) in file" 
            :src="item" :key="index">
          </div>
          <div class="file_video" v-if="result.filetype == 'video'">
            <video :src="file[0]" controls></video>
          </div>
        </div>
        <div class="report" @click="reportTopics">
          <svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-jubao'></use>
          </svg>
          <span>举报</span>
        </div>
      </div>
      <topics-comments :topicsid="$route.params.id"></topics-comments>
    </div>
    <report-vue :reportObj="reportObj" @offReport="reportObj=null" v-show="reportObj"></report-vue>
  </div>
</template>

<script>
import tool from '../../assets/js/tool'
import UserInfo from '../info/userMessage.vue'
import TopicsRanking from "./topicsRanking.vue"
import topicsComments from './topicsComments.vue'
import TopicsComments from './topicsComments.vue'
import ReportVue from './report.vue'
import { mapActions } from 'vuex'
export default {
  name: 'TopicsDetail',

  data() {
    return {
      result: { // 话题信息
        username: ''
      },
      rankingData: [], // 排行榜数据集
      file: [], // 文件数据集
      reportObj: null // 被举报话题对象
    };
  },

  computed: {
    timer(){
      return (time) => tool.GetTimer(time)
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.$api.getTopic({id:this.$route.params.id}).then(res => {
        this.result = res.result
        this.rankingData = res.topics
        document.title = res.result.title
        this.file = res.result.fileurl.split(',')
      }).catch(() => {
        this.showHint({title:'帖子已被用户删除',isFlag:false})
        this.$router.push('/topic')
      })
    },
    // 举报话题
    reportTopics(){
      this.reportObj = this.result
    },
    ...mapActions(['showHint'])
  },

  components: {
    TopicsRanking,
    UserInfo,
    topicsComments,
    TopicsComments,
    ReportVue
},
};
</script>

<style scoped>
.topic{
  width: 100%;
  display: flex;
  background-color: #ececec;
  padding: 20px;
}
.topic .topic_left{
  flex: 1;
}
.topic .topic_right{
  flex: 4;
  background-color: white;
  margin-left: 20px;
}
.topic .topic_right .content{
  position: relative;
}
.content > span{
  display: block;
  margin: 20px;
  margin-bottom: 0;
}
.content .title{
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  background-color: #ececec;
}
.topic .topic_right .box{
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0.5rem;
  display: flex;
}
.topic .topic_right .box .icon{
  font-size: 1rem;
}
.topic .topic_right .box > span{
  display: flex;
  align-items: center;
  margin: 0 4px;
}
.topic .topic_right .file img{
  width: 180px;
  margin: 20px;
}
.topic .topic_right .file video{
  width: 320px;
  margin: 20px;
}
.topic_right .report{
  position: absolute;
  top: 10px;
  right: 10px;  
  font-size: 0.8rem;
  cursor: pointer;
  color: gray;
}
.topic_right .report:hover{
  color: black;
}
@media screen and (max-width:800px){
  .topic{
    padding: 0;
    flex-direction: column;
  }
  .topics_ranking{
    display: none;
  }
  .topic .topic_right{
    margin: 0;
  }
}
</style>